<template>
  <div id="app" :class="{ dark: isDark }">
    <router-view />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const isDark = ref(false)

// 主题切换
const toggleTheme = () => {
  isDark.value = !isDark.value
  localStorage.setItem('config-editor-theme', isDark.value ? 'dark' : 'light')
}

// 初始化主题
onMounted(() => {
  const savedTheme = localStorage.getItem('config-editor-theme')
  isDark.value = savedTheme === 'dark'
})

// 全局提供主题切换方法
provide('toggleTheme', toggleTheme)
provide('isDark', isDark)
</script>

<style>
/* 这里的样式在 src/styles/index.css 中定义 */
</style>
